.live-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  width: 150px;
  margin-right: 5px;
  flex-shrink: 0;
}

.live-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.media-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.live-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
}

.live-card:hover .live-cover {
  transform: scale(1.08);
  filter: brightness(1.05) contrast(1.05);
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.live-card video.live-cover {
  animation: pulse 2s infinite ease-in-out;
}

.live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 45, 85, 0.9);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  z-index: 2;
  transition: transform 0.3s ease, background 0.3s ease;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.4);
}

.live-card:hover .live-badge {
  transform: scale(1.1);
  background: rgba(255, 0, 64, 0.95);
}

.live-info {
  padding: 10px 12px;
  transition: transform 0.3s ease;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), #fff);
}

.live-card:hover .live-info {
  transform: translateY(-2px);
}

.live-title {
  font-weight: bold;
  font-size: 14px;
  margin: 0 0 6px 0;
  transition: color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-card:hover .live-title {
  color: #ff2d55;
}

.live-meta {
  font-size: 12px;
  color: #888;
  display: flex;
  justify-content: space-between;
}

.location-info, .viewer-info {
  display: flex;
  align-items: center;
}

/* 视频过渡动画 */
.live-card video.live-cover,
.live-card img.live-cover {
  transition: transform 0.4s ease, filter 0.3s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 鼠标悬停或触摸时的缩放效果 */
.live-card:hover img.live-cover,
.live-card.touched img.live-cover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* 触摸提示动画 */
@keyframes pulse {
  0% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.7; transform: scale(1); }
}

.touch-hint {
  animation: pulse 2s infinite ease-in-out;
}

/* 滑动反馈动画 */
@keyframes swipeHint {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/* 添加滑动检测状态的类 */
.live-card.swiping .touch-hint {
  animation: swipeHint 0.5s ease-in-out;
}

/* 添加触摸状态的类 */
.live-card.touched video.live-cover {
  transform: scale(1.08);
}

/* 视频加载指示器 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  opacity: 0.8;
  z-index: 5;
}

/* 为视图中的直播卡片添加CSS效果 */
.live-card.in-view {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  position: relative;
  z-index: 5;
}

.live-card.in-view::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  background: linear-gradient(45deg, #ff2d55, #ff8a00);
  z-index: -1;
  opacity: 0;
  animation: pulse-border 2s ease-in-out infinite;
}

/* 添加进入动画效果 */
.live-card.anim-active {
  animation: card-pop 0.6s ease-in-out;
}

@keyframes card-pop {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 热门直播卡片特效 */
.live-card.hot-card {
  border: 1px solid rgba(255, 87, 34, 0.2);
}

.live-card.hot-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #ff2d55, #ff8a00);
  z-index: 2;
}

@keyframes pulse-border {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* 进入直播间提示 */
.enter-live-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  padding: 5px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  opacity: 0;
}

.live-card:hover .enter-live-hint {
  transform: translateY(0);
  opacity: 1;
}

/* 热度标签 */
.hot-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(255, 69, 0, 0.8);
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  z-index: 2;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 3px;
}

.live-card:hover .hot-badge {
  background-color: rgba(255, 69, 0, 1);
  transform: translateY(-2px);
}

/* 推荐标签 */
.recommend-tag {
  position: absolute;
  top: 40px;
  left: 8px;
  background-color: rgba(75, 0, 130, 0.8);
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  z-index: 2;
  transition: all 0.3s ease;
}

.live-card:hover .recommend-tag {
  background-color: rgba(75, 0, 130, 1);
  transform: translateY(-2px);
}

/* 直播时长 */
.live-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  z-index: 2;
}

/* 添加闪烁的圆点 */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  margin-right: 4px;
  animation: pulse-dot 1.5s infinite ease-in-out;
}

@keyframes pulse-dot {
  0% { opacity: 0.5; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.5; transform: scale(0.8); }
} 